<template>
  <div style="min-height: 100%;background: ##F5F5F5;">
    <keep-alive>
      <router-view v-if="keepAlive" />
    </keep-alive>
    <router-view v-if="!keepAlive" />
    <van-tabbar v-model="active" active-color="#ee0a24" v-show="tabbarVisible" v-if="userInfo.userType != '2'">
      <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/app/collection/index" icon="notes-o">信息采集</van-tabbar-item>
      <van-tabbar-item replace to="/app/construction/index" icon="cluster-o">渠道建设</van-tabbar-item>
      <van-tabbar-item replace to="/app/mytask/index" icon="todo-list-o" :badge="todoNumber || null">我的任务</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import { getAction } from '@api/manage'
import { USER_INFO } from "@/store/mutation-types"

  export default {
    name: "AppLayout",
    data() {
      return {
        tabbarVisible: true,
        active: 0,
        todoNumber: 0,
        userInfo: {},
      }
    },
    watch: {
      '$route': function(newRoute) {
        console.log("新的路由",newRoute)

        const fullPath = newRoute.fullPath;
        this.routeChange(fullPath)
      },
    },
    provide(){
      return{
        getMytaskNum: this.getMytaskList
      }
    },
    computed: {
      //update-end--Author:scott  Date:20201015 for：路由缓存问题，关闭了tab页时再打开就不刷新 #842
      keepAlive () {
        console.log('keeplive', this.$route.meta.keepAlive)
        return this.$route.meta.keepAlive
      }
    },
    created() {
      this.userInfo = Vue.ls.get(USER_INFO);

      if ( this.userInfo.userType != '2' ) {
        // 复制一个route对象出来，不能影响原route
        let currentRoute = Object.assign({}, this.$route)
        currentRoute.meta = Object.assign({}, currentRoute.meta)
        const fullPath = currentRoute.fullPath;
        this.routeChange(fullPath);
        this.getMytaskList();
      }
    },
    methods: {
      routeChange( fullPath ) {
        // 循环判断当前 path 属于哪个大菜单下
        const menuMap = {
          '/app/collection': 1,
          '/app/construction': 2,
          '/app/mytask': 3
        }
        const arrMenu = Object.keys(menuMap);

        for ( let i = 0; i < arrMenu.length; i++ ) {
          const key = arrMenu[i];
          if ( fullPath.indexOf( key ) >= 0 ) {
            this.active = menuMap[key];
            break;
          }
          if ( i == arrMenu.length - 1 ) {
            this.active = 0;
          }
        }
        if ( fullPath.indexOf('/index') >= 0 ) {
          this.tabbarVisible = true;
        } else {
          this.tabbarVisible = false;
        }
        console.log( '当前菜单 index:', this.active )
      },
      getMytaskList() {
        getAction( '/order/getMytaskList', {
          pageNum: 1,
          pageSize: 10
        } )
          .then( res => {
            const data = res.result;
            console.log(data)
            this.todoNumber = data.total;
          } )
      },
    },
  }
</script>

<style scoped>

</style>